<template>
	<view class="index-container">
		<!-- 搜索栏 -->
		<view class="search-bar bg-blue">
			<view class="search-box">
				<uni-icons type="search" size="20" color="#fff"/>
				<input 
					placeholder="搜索学校或科目" 
					placeholder-class="placeholder-style"
					class="search-input"
				/>
			</view>
		</view>
		
		<!-- 分类导航 -->
		<scroll-view scroll-x class="category-scroll">
			<view 
				v-for="(item, index) in categories" 
				:key="index"
				:class="['category-item', { active: activeCategory === index }]"
				@click="activeCategory = index"
			>
				{{ item.name }}
			</view>
		</scroll-view>
		
		<!-- 公告轮播 -->
		<swiper class="notice-swiper" autoplay circular>
			<swiper-item 
				v-for="(post, index) in topPosts" 
				:key="index"
				class="swiper-item"
			>
				<view class="notice-card">
					<uni-icons type="info" size="18" color="#fff"/>
					<text class="notice-text">{{ post.title }}</text>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 需求列表 -->
		<view class="post-list">
			<view 
				class="post-card"
				v-for="post in postList"
				:key="post.id"
				:class="{ urgent: post.isUrgent }"
			>
				<view class="card-header">
					<text class="school">{{ post.schoolName }}</text>
					<view class="status-tag">
						<text v-if="post.isUrgent" class="urgent-tag">紧急</text>
						<text class="time">{{ post.createdAt }}</text>
					</view>
				</view>
				
				<view class="card-content">
					<view class="info-row">
						<uni-icons type="location" size="16" color="#666"/>
						<text>{{ post.location }}</text>
					</view>
					<view class="info-row">
						<uni-icons type="book" size="16" color="#666"/>
						<text>{{ post.subject }}</text>
					</view>
				</view>

				<view class="card-footer">
					<text class="count">需要{{ post.needCount }}人</text>
					<view class="action-btns">
						<button class="btn collect">收藏</button>
						<button class="btn contact">立即联系</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 悬浮按钮 -->
		<view class="fab-box" @click="goPost">
			<view class="fab-btn bg-blue">
				<uni-icons type="plusempty" size="28" color="#fff"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeCategory: 0,
				categories: [
					{ name: '紧急需求' },
					{ name: '长期招募' },
					{ name: '学科教学' },
					{ name: '艺术培训' },
					{ name: '暑期项目' }
				],
				topPosts: [
					{ id: 1, title: '社区发帖规范及管理公告' },
					{ id: 2, title: '新手入门指南' }
				],
				postList: [
					{
						id: 1,
						title: 'Vue3.0最新特性解析与实践',
						author: {
							name: '技术达人',
							avatar: '/static/avatar1.png'
						},
						createTime: '2小时前',
						tag: '技术',
						views: 1200,
						comments: 45,
						likes: 89
					},
					// 更多帖子数据...
				]
			}
		},
		onLoad() {

		},
		methods: {
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/index'
				})
			},
			changeCategory(index) {
				this.activeCategory = index
				// 这里可以添加加载分类帖子的逻辑
			},
			viewPostDetail(id) {
				uni.navigateTo({
					url: `/pages/post/detail?id=${id}`
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			isCollected(id) {
				return (uni.getStorageSync('collections') || []).some(item => item.id === id)
			},
			toggleCollect(post) {
				const collections = uni.getStorageSync('collections') || []
				const index = collections.findIndex(item => item.id === post.id)
				if (index === -1) {
					collections.push({
						id: post.id,
						schoolName: post.schoolName,
						location: post.location,
						needCount: post.needCount,
						duration: post.duration,
						deadline: post.deadline,
						status: 'ongoing'
					})
					uni.showToast({ title: '收藏成功' })
				} else {
					collections.splice(index, 1)
					uni.showToast({ title: '已取消收藏' })
				}
				uni.setStorageSync('collections', collections)
			},
			goPost() {
				uni.switchTab({
					url: '/pages/post/create'
				})
			}
		},
		mounted() {
			uni.$on('collection-updated', () => {
				this.postList = [...this.postList] // 强制刷新列表
			})
		}
	}
</script>

<style lang="scss" scoped>
.index-container {
	background: #f5f7fa;
	min-height: 100vh;
	
	.search-bar {
		padding: 20rpx 30rpx 80rpx;
		border-radius: 0 0 40rpx 40rpx;
		
		.search-box {
			background: rgba(255,255,255,0.2);
			border-radius: 50rpx;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			
			.search-input {
				color: #fff;
				margin-left: 15rpx;
				font-size: 28rpx;
			}
			
			.placeholder-style {
				color: rgba(255,255,255,0.8);
			}
		}
	}

	.category-scroll {
		white-space: nowrap;
		padding: 0 30rpx;
		margin-top: -40rpx;
		
		.category-item {
			display: inline-block;
			padding: 12rpx 35rpx;
			margin-right: 20rpx;
			background: #fff;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #666;
			box-shadow: 0 4rpx 12rpx rgba(91,192,235,0.1);
			
			&.active {
				background: #5bc0eb;
				color: #fff;
			}
		}
	}

	.notice-swiper {
		height: 80rpx;
		padding: 0 30rpx;
		margin: 30rpx 0;
		
		.notice-card {
			background: linear-gradient(90deg, #5bc0eb, #4cd964);
			border-radius: 12rpx;
			padding: 18rpx 25rpx;
			display: flex;
			align-items: center;
			color: #fff;
			
			.notice-text {
				font-size: 26rpx;
				margin-left: 15rpx;
			}
		}
	}

	.post-list {
		padding: 0 30rpx;
		
		.post-card {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 25rpx;
			box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.04);
			
			&.urgent {
				border-left: 8rpx solid #ff3b30;
			}
			
			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 25rpx;
				
				.school {
					font-size: 32rpx;
					color: #2c3e50;
					font-weight: 500;
				}
				
				.status-tag {
					display: flex;
					align-items: center;
					
					.urgent-tag {
						background: #ffe6e5;
						color: #ff3b30;
						padding: 6rpx 15rpx;
						border-radius: 6rpx;
						font-size: 24rpx;
						margin-right: 15rpx;
					}
					
					.time {
						color: #999;
						font-size: 24rpx;
					}
				}
			}
			
			.card-content {
				.info-row {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					color: #666;
					font-size: 26rpx;
					
					uni-icons {
						margin-right: 10rpx;
					}
				}
			}
			
			.card-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				
				.count {
					color: #5bc0eb;
					font-size: 26rpx;
				}
				
				.action-btns {
					display: flex;
					gap: 15rpx;
					
					.btn {
						padding: 12rpx 30rpx;
						border-radius: 30rpx;
						font-size: 26rpx;
						
						&.collect {
							background: #fff;
							color: #5bc0eb;
							border: 1rpx solid #5bc0eb;
						}
						
						&.contact {
							background: #5bc0eb;
							color: #fff;
						}
					}
				}
			}
		}
	}

	.fab-box {
		position: fixed;
		right: 40rpx;
		bottom: 120rpx;
		
		.fab-btn {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 8rpx 20rpx rgba(91,192,235,0.3);
		}
	}
}

.bg-blue {
	background: #5bc0eb;
}
</style>
